<template>
  <div>
    <div class="fastMenu">
      <ul>
        <li class="datacenter">
          <p>数据中心</p>
        </li>
        <li class="dispatch">
          <p>调度管理</p>
        </li>
        <li class="transport">
          <p>运输报表</p>
        </li>
        <li class="transportManage">
          <p>运输管理</p>
        </li>
      </ul>
    </div>
    <div class="dataShow">
      <div class="leftDiv">
        <div class="topSelect">
          <h3>数据中心</h3>
          <el-select v-model="value" placeholder="请选择" @change='getValue'>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div id='myChart' style='width：600px;height:400px'></div>
        <div class="circles">
          <div class="item done">
            <el-progress type="circle" :percentage="75" color="#fa7252"></el-progress>
            <p>
              <span class="title">已处理</span><br>
              <span>3,123,121</span>
            </p>
          </div>
          <div class="item untreated">
            <el-progress type="circle" :percentage="29" color="#1cb162"></el-progress>
            <p>
              <span class="title">未处理</span><br>
              <span>745,121</span>
            </p>
          </div>
          <div class="item waste">
            <el-progress type="circle" :percentage="64" color="#1bb8fa"></el-progress>
            <p>
              <span class="title">废油渣</span><br>
              <span>1,745,121</span>
            </p>
          </div>
        </div>
      </div>
      <div class="rightDiv">
        <div class="rightContent">
          <h3>消息中心</h3>
          <ul>
            <li>
              <div class="msgList">
                <span class="msgTitle">废物容器预警</span>-<span class="msgContent">容器容量已经超过30%，请尽快处理！</span>
              </div>
              <img src="../../assets/hot.png" alt="">
              <span>02-28</span>
            </li>
            <li>
              <div class="msgList">
                <span class="msgTitle">废物容器预警</span>-<span class="msgContent">容器容量已经超过30%，请尽快处理！</span>
              </div>
              <img src="../../assets/common.png" alt="">
              <span>02-28</span>
            </li>
            <li>
              <div class="msgList">
                <span class="msgTitle">废物容器预警</span>-<span class="msgContent">容器容量已经超过30%，请尽快处理！</span>
              </div>
              <img src="../../assets/hot.png" alt="">
              <span>02-28</span>
            </li>
            <li>
              <div class="msgList">
                <span class="msgTitle">废物容器预警</span>-<span class="msgContent">容器容量已经超过30%，请尽快处理！</span>
              </div>
              <img src="../../assets/common.png" alt="">
              <span>02-28</span>
            </li>
            <li>
              <div class="msgList">
                <span class="msgTitle">废物容器预警</span>-<span class="msgContent">容器容量已经超过30%，请尽快处理！</span>
              </div>
              <img src="../../assets/hot.png" alt="">
              <span>02-28</span>
            </li>
            <li>
              <div class="msgList">
                <span class="msgTitle">废物容器预警</span>-<span class="msgContent">容器容量已经超过30%，请尽快处理！</span>
              </div>
              <img src="../../assets/common.png" alt="">
              <span>02-28</span>
            </li>
            <li>
              <div class="msgList">
                <span class="msgTitle">废物容器预警</span>-<span class="msgContent">容器容量已经超过30%，请尽快处理！</span>
              </div>
              <img src="../../assets/hot.png" alt="">
              <span>02-28</span>
            </li>
            <li>
              <div class="msgList">
                <span class="msgTitle">废物容器预警</span>-<span class="msgContent">容器容量已经超过30%，请尽快处理！</span>
              </div>
              <img src="../../assets/common.png" alt="">
              <span>02-28</span>
            </li>
            <li>
              <div class="msgList">
                <span class="msgTitle">废物容器预警</span>-<span class="msgContent">容器容量已经超过30%，请尽快处理！</span>
              </div>
              <img src="../../assets/hot.png" alt="">
              <span>02-28</span>
            </li>
            <li>
              <div class="msgList">
                <span class="msgTitle">废物容器预警</span>-<span class="msgContent">容器容量已经超过30%，请尽快处理！</span>
              </div>
              <img src="../../assets/common.png" alt="">
              <span>02-28</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="news">
      <div class="newsTop">
        <h3>环保动态</h3>
        <span>更多动态 ></span>
      </div>
      <!-- 瀑布流布局 @scrollReachBottom=""-->
      <vue-waterfall-easy :imgsArr="imgsArr"  height='600' :maxCols='6'>
        <div class="img-info" slot-scope="props">
          <p class="some-info">第{{props.index+1}}张图片</p>
          <p class="summary">{{props.value.info}}</p>
          <p class="date">{{props.value.date}}</p>
        </div>
      </vue-waterfall-easy>
    </div>
  </div>
</template>
<script>
// import chinaJson from '@/utils/map/json/china.json'

import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
  data() {
    return {
         myChart: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      imgsArr: [], //存放所有已加载图片的数组（即当前页面会加载的所有图片）
      fetchImgsArr: [] //存放每次滚动时下一批要加载的图片的数组
    };
  },
  created() {
    this.imgsArr = this.initImgsArr(0, 10) //初始化第一次（即页面加载完毕时）要加载的图片数据
    this.fetchImgsArr = this.initImgsArr(10, 20) // 模拟每次请求的下一批新的图片的数据数据
  },
  mounted() {
     this.drawLine()

    this.myChart.resize();
    window.addEventListener("resize", () => {
      if (this.myChart) {
        this.myChart.resize();
      }
    });
   // this.$common.$ajax('sys/menu/nav', {}, 'get').then(res => {
// console.log(res)
// })

  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      this.myChart.setOption({
        grid: {
          left: 40,
          top: 20,
          right: 20,

        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      });
    },
    getValue(e) {
      console.log(e)
    },
    initImgsArr(n, m) { //初始化图片数组的方法，把要加载的图片装入
      var arr = []
      for (var i = n; i < m; i++) {
        arr.push({ src: `static/${i + 1}.jpeg`, link: '', info: '一些图片描述文字一些图片描述文字一些图片描述文字一些图片描述文字一些图片描述文字一些图片描述文字一些图片描述文字', date: '2018-10-12' }) //src为加载的图片的地址、link为超链接的链接地址、

        //info为自定义的图片展示信息，请根据自己的情况自行填写
      }
      return arr
    },

    fetchImgsData() { //获取新的图片数据的方法，用于页面滚动满足条件时调用
      this.imgsArr = this.imgsArr.concat(this.fetchImgsArr) //数组拼接，把下一批要加载的图片放入所有图片的数组中
    }
  },
  components: {
    vueWaterfallEasy
  }



}

</script>
<style lang="scss" scoped>
.fastMenu {
  // padding: 20px;
  background: #fff;
  border-radius: 5px;
  padding: 20px 10px;

  ul {
    display: flex;
    width: 100%;
    justify-content: space-between;

    li {
      width: 304px;
      height: 125px;
      line-height: 125px;
      text-align: right;

      p {
        width: 75%;
        float: right;
        text-align: center;
        height: 100%;
        color: #fff;
      }
    }

    .datacenter {

      background: url('../../assets/datacenter.png') no-repeat center center;
    }

    .dispatch {
      background: url('../../assets/dispatch.png') no-repeat center center;
    }

    .transport {
      background: url('../../assets/transport.png') no-repeat center center;
    }

    .transportManage {
      background: url('../../assets/transportManage.png') no-repeat center center;
    }
  }
}

.dataShow {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;


  padding: 10px 0;


  .leftDiv {
    width: 80%;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;

    .topSelect {
      display: flex;
      height: 40px;
      justify-content: space-between;
      align-items: center;

      h3 {
        margin: 20px 0;
        font-size: 22px;
        color: #333;
      }
    }

    .circles {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }

  .rightDiv {
    background: #f6f6f6;
    width: 20%;

    padding-left: 20px;
    box-sizing: border-box;


    .rightContent {
      background: #fff;
      padding: 20px 10px;
      height: 100%;
      border-radius: 5px;

      h3 {
        font-size: 22px;
        color: #333;
      }

      ul {
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 0;

          &>span {
            font-size: 12px;
            color: #999;
          }

          img {
            width: 22px;
            height: 22px;
          }

          .msgList {
            width: 70%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

            span {
              font-size: 14px;

              .msgContent {}
            }
          }


        }
      }
    }
  }
}

.item {
  text-align: center;

  p {
    margin-top: 10px;

    span {
      display: inline-block;
      font-size: 18px;

      &:nth-child(1) {
        margin-bottom: 5px;
        color: #666;
      }

      &:nth-child(2) {
        font-weight: bold;
        font-size: 20px;
      }
    }
  }
}

.news {
  background: #f6f6f6;

  .newsTop {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 60px;
    align-items: center;

    h3 {
      font-size: 22px;
      color: #333;
    }

    span {
      font-size: 16px;
      color: #a8abbe;
    }
  }

}

.img-info {
  padding: 20px;
  padding-bottom: 10px;
}

.some-info {
  font-size: 16px;
  color: #333;
  // text-align: center;
  width: 100%;

}

.summary {
  font-size: 14px;
  color: #666;
  margin: 10px 0;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 20px;
}

.date {
  color: #999;
  font-size: 12px;
}

</style>
